* {
  margin: 0;
  padding: 0;
}
body {
  padding-left: 200px;
  padding-right: 200px;
}
header,
footer {
  width: 100%;
  height: 200px;
  background-color: #ccc;
}
.layout {
  margin: 20px 0;
}
.layout1 .left {
  float: left;
  width: 400px;
  height: 100px;
  background-color: #daf1ef;
}
.layout1 .right {
  height: 100px;
  margin-left: 420px;
  background-color: #4dbcb0;
}
.layout2 .left {
  height: 100px;
  margin-right: 420px;
  background-color: #4dbcb0;
}
.layout2 .right {
  float: right;
  width: 400px;
  height: 100px;
  background-color: #daf1ef;
}
.layout3 .left {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #daf1ef;
}
.layout3 .center {
  height: 100px;
  margin-left: 220px;
  margin-right: 220px;
  background-color: #4dbcb0;
}
.layout3 .right {
  float: right;
  width: 200px;
  height: 100px;
  background-color: #daf1ef;
}
.layout4 .left {
  float: left;
  width: 200px;
  height: 100px;
  margin-right: 20px;
  background-color: #daf1ef;
}
.layout4 .center {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #daf1ef;
}
.layout4 .right {
  height: 100px;
  margin-left: 440px;
  background-color: #4dbcb0;
}
.layout5 .left {
  margin-right: 440px;
  height: 100px;
  background-color: #4dbcb0;
}
.layout5 .center {
  float: right;
  width: 200px;
  height: 100px;
  background-color: #daf1ef;
  margin-right: 20px;
}
.layout5 .right {
  float: right;
  width: 200px;
  height: 100px;
  background-color: #daf1ef;
}
